<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>01_基本使用</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器-->
        <div id="demo">
            <!-- 3.写组件标签 -->
            <School></School>
            <hr>
            <Person></Person>
        </div>
    </body>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
        // 1.创建一个School组件
        const School = Vue.extend({
            template:`
                <div>
                    <h2>学校名称:{{sname}}</h2>
					<h2>学校地址:{{address}}</h2>
					<button @click="sname+='~'">修改学校名</button>
					<button @click="welcome">欢迎同学们</button>
                </div>
            `,
            data(){
                return{
                    sname:'尚硅谷',
					address:'宏福科技园',
                }
            },
            methods:{
                welcome(){
					alert(`${this.sname}欢迎你！`)
				}
            }
        }
           
        );

        // 1.创建一个Person组件
        const Person = Vue.extend({
            template:`
                <div>
                    <h2>人名:{{pname}}</h2>
					<h2>年龄:{{age}}</h2>
					<button @click="age++">年龄+1</button>
					<button @click="speak">说话</button>
                </div>
            `,
            data(){
                return {
                    pname:'张三',
					age:18
                }
            },
            methods: {
                speak(){
					alert('十一来了，我要好好学习！')
				}
            },
        })

        new Vue({
            el:'#demo',
            // 2.注册组件
            components:{
                School,
                Person
            }
        })

    </script>
</html>